<script lang="ts" setup>
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue';

import { Page } from '@vben/common-ui';
import { useUserStore } from '@vben/stores';

import {
  Avatar,
  Button,
  Card,
  Input,
  message,
  Table,
  Tooltip,
} from 'ant-design-vue';
import { io, Socket } from 'socket.io-client';

import { aiAgentScorePage } from '#/api/ai/ai';
import { Icon } from '#/components/icon';

// 导入共享组件
import { Empty, Loading } from '../components';

// 定义成绩接口
interface PlaygroundScore {
  id: number;
  name: string;
  code: string;
  chinese: number;
  math: number;
  english: number;
}

// 定义分页接口
interface PageResult<T> {
  records: T[];
  total: number;
  size: number;
  current: number;
  pages: number;
}

// 消息项类型定义
interface MessageItem {
  id: string;
  role: 'ai' | 'user';
  content: string;
  avatar?: string;
  nickname?: string;
  typing?: boolean;
}

// 状态管理
const loading = ref(false);
const messageInput = ref('');
const messagesContainerRef = ref<HTMLElement | null>(null);
const socketClient = ref<null | Socket>(null);

// 表格相关状态
const tableLoading = ref(false);
const tableData = ref<PlaygroundScore[]>([]);
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showTotal: (total: number) => `共 ${total} 条`,
});

// 对话相关状态
const messages = ref<MessageItem[]>([]);

// 获取用户信息
const userStore = useUserStore();
const userId = userStore.userInfo?.userId;
const userAvatar = userStore.userInfo?.avatar;
const userNickname = userStore.userInfo?.nickname || '用户';

// 表格列定义
const columns = [
  {
    title: '学号',
    dataIndex: 'code',
    key: 'code',
    width: 120,
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    width: 120,
  },
  {
    title: '语文',
    dataIndex: 'chinese',
    key: 'chinese',
    width: 100,
  },
  {
    title: '数学',
    dataIndex: 'math',
    key: 'math',
    width: 100,
  },
  {
    title: '英语',
    dataIndex: 'english',
    key: 'english',
    width: 100,
  },
];

// 获取表格数据
const fetchTableData = async () => {
  tableLoading.value = true;
  try {
    const response = await aiAgentScorePage(
      pagination.value.current,
      pagination.value.pageSize,
    );

    // 解析响应数据
    let result: PageResult<PlaygroundScore>;
    try {
      // 检查response是否已经是对象
      result =
        typeof response === 'object' && response !== null
          ? (response as PageResult<PlaygroundScore>)
          : JSON.parse(response);

      console.error('解析后的数据:', result);

      // 验证结果是否包含必要的字段
      if (!result || !Array.isArray(result.records)) {
        console.error('返回数据格式不正确:', result);
        message.error('返回数据格式不正确');
        return;
      }
    } catch (error) {
      console.error('解析JSON失败:', error, '原始数据:', response);
      message.error('数据格式错误');
      // 尝试创建一个空的结果对象以避免界面崩溃
      result = {
        records: [],
        total: 0,
        size: pagination.value.pageSize,
        current: pagination.value.current,
        pages: 0,
      };
    }

    // 更新表格数据
    tableData.value = result.records;
    pagination.value.total = result.total;
    pagination.value.current = result.current;
  } catch (error) {
    console.error('获取表格数据失败:', error);
    message.error('获取表格数据失败');
    // 重置表格数据
    tableData.value = [];
  } finally {
    tableLoading.value = false;
  }
};

// 手动刷新表格数据
const refreshTableData = async () => {
  try {
    message.loading({
      content: '刷新数据中...',
      key: 'refreshTable',
      duration: 0,
    });
    await fetchTableData();
    message.success({
      content: '数据刷新成功!',
      key: 'refreshTable',
      duration: 2,
    });
  } catch (error) {
    console.error('刷新表格数据失败:', error);
    message.error({
      content: '刷新数据失败，请重试',
      key: 'refreshTable',
      duration: 2,
    });
  }
};

// 处理表格分页变化
const handleTableChange = (pag: any) => {
  pagination.value.current = pag.current;
  pagination.value.pageSize = pag.pageSize;
  fetchTableData();
};

// 初始化Socket.IO连接
const initSocketConnection = () => {
  if (socketClient.value) {
    // 如果已存在连接，先断开
    socketClient.value.disconnect();
  }

  try {
    // 连接Socket.IO服务器，携带userId参数
    socketClient.value = io(`127.0.0.1:9021?userId=${userId}`);

    // 处理连接事件
    socketClient.value.on('connect', () => {
      console.error('Socket.IO连接成功');
    });

    // 处理断开连接事件
    socketClient.value.on('disconnect', () => {
      console.error('Socket.IO连接断开');
    });

    // 添加全局事件监听，用于调试
    socketClient.value.onAny((eventName, ...args) => {
      console.error(`接收到事件: ${eventName}，数据:`, args);
    });

    // 处理连接错误
    socketClient.value.on('connect_error', (error) => {
      console.error('Socket.IO连接错误:', error);
      message.error('连接服务器失败');
    });

    return true;
  } catch (error) {
    console.error('初始化Socket.IO连接失败:', error);
    message.error('连接服务器失败');
    return false;
  }
};

// 断开Socket.IO连接
const disconnectSocket = () => {
  if (socketClient.value) {
    // 移除所有事件监听器
    socketClient.value.offAny();
    socketClient.value.disconnect();
    socketClient.value = null;
  }
};

// 自动滚动到底部
const scrollToLatestMessage = async () => {
  await nextTick();
  if (messagesContainerRef.value) {
    messagesContainerRef.value.scrollTop =
      messagesContainerRef.value.scrollHeight;
  }
};

// 生成唯一ID
const generateId = () => {
  return Date.now().toString(36) + Math.random().toString(36).slice(2);
};

// 添加用户消息
const addUserMessage = (content: string) => {
  messages.value.push({
    id: generateId(),
    role: 'user',
    content,
    nickname: userNickname,
    avatar: userAvatar,
  });
};

// 添加AI消息
const addAIMessage = (content: string): string => {
  const id = generateId();
  messages.value.push({
    id,
    role: 'ai',
    content,
    nickname: '智能助教',
    typing: true,
  });
  return id;
};

// 判断消息是否为用户消息
const isUserMessage = (msg: MessageItem) => msg.role === 'user';

// 获取消息昵称
const getMessageNickname = (msg: MessageItem) => {
  return isUserMessage(msg) ? msg.nickname || '' : '智能助教';
};

// 更新AI消息
const updateAIMessage = (
  id: string,
  contentOrUpdater: ((prev: string) => string) | string,
) => {
  const index = messages.value.findIndex((msg) => msg.id === id);
  if (index !== -1) {
    const message = messages.value[index];
    if (message) {
      message.content =
        typeof contentOrUpdater === 'function'
          ? contentOrUpdater(message.content)
          : contentOrUpdater;
      message.typing = false;
    }
  }
};

// 解析响应数据的辅助函数
const parseResponseData = (data: any): string => {
  // 如果是字符串
  if (typeof data === 'string') {
    try {
      // 尝试解析为JSON
      const jsonData = JSON.parse(data);
      return jsonData?.content || jsonData?.message || jsonData?.text || '';
    } catch {
      // 如果不是JSON格式，直接使用字符串
      // 字符串可能已经是Markdown格式，保留原样
      return data;
    }
  }

  return '';
};

// 使用Socket.IO发送消息并接收流式响应
const sendMessageWithSocketIO = async (
  aiMessageId: string,
  userInput: string,
) => {
  if (!socketClient.value?.connected) {
    // 如果没有连接，尝试重新连接
    initSocketConnection();

    if (!socketClient.value?.connected) {
      message.warning('无法连接到服务器，请重试');
      return false;
    }
  }

  try {
    // 先移除之前的response事件监听器，避免重复订阅
    socketClient.value.off('response');

    // 处理流式响应
    let isFirstMessage = true;

    // 监听服务端返回的response事件
    socketClient.value.on('response', (data) => {
      console.error('收到服务端response事件数据:', data);

      // 第一条消息时，清除加载提示
      if (isFirstMessage) {
        updateAIMessage(aiMessageId, '');
        isFirstMessage = false;
      }

      // 尝试解析不同格式的数据
      const content = parseResponseData(data);

      // 如果解析出内容，添加到消息中
      if (content) {
        updateAIMessage(aiMessageId, (prev) => prev + content);
        scrollToLatestMessage();
      }
    });

    // 处理任何错误
    socketClient.value.once('error', (error) => {
      console.error('Socket.IO错误:', error);
      message.error('接收数据出错，请重试');
    });

    // 发送用户消息到服务器，事件名为edu
    console.error(`发送消息到服务器，事件名: edu，内容: ${userInput}`);
    socketClient.value.emit('edu', userInput);

    // 监听完成事件，用于清理资源
    socketClient.value.once('done', () => {
      console.error('服务端处理完成');
    });

    return true;
  } catch (error) {
    console.error('使用Socket.IO发送消息失败:', error);
    message.error('发送消息失败，请重试');
    return false;
  }
};

// 发送消息
const handleSendMessage = async () => {
  if (!messageInput.value.trim()) {
    message.warning('请输入消息内容');
    return;
  }

  // 获取用户输入并清空输入框
  const userInput = messageInput.value;
  messageInput.value = '';

  // 添加用户消息
  addUserMessage(userInput);

  // 滚动到最新消息
  await scrollToLatestMessage();

  // 显示加载状态
  loading.value = true;

  try {
    // 创建AI回复的占位符
    const aiMessageId = addAIMessage('思考中...');
    await scrollToLatestMessage();

    // 使用Socket.IO发送消息
    const success = await sendMessageWithSocketIO(aiMessageId, userInput);

    if (!success) {
      updateAIMessage(aiMessageId, '连接服务器失败，请重试');
    }
  } catch (error) {
    console.error('发送消息出错:', error);
    message.error('发送消息失败，请重试');
  } finally {
    loading.value = false;
  }
};

// 监听Enter键发送消息
const handleKeyDown = (e: KeyboardEvent) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    handleSendMessage();
  }
};

// 清空消息
const clearMessages = () => {
  messages.value = [];
};

// 组件挂载时初始化
onMounted(() => {
  // 初始化获取表格数据
  fetchTableData();
  // 初始化Socket.IO连接
  initSocketConnection();

  // 添加欢迎消息 (直接添加，不显示加载状态)
  const welcomeId = addAIMessage(`# 欢迎使用智能助教

我可以回答你关于学习和课程的问题，也可以帮助你分析上方表格中的数据。你可以这样提问：

- 请解释一下表格中的数据是什么？
- 谁的数学成绩最好？
- 如何提高语文成绩？

请输入你的问题...`);

  // 立即将欢迎消息的加载状态设为false
  updateAIMessage(welcomeId, (content) => content);
});

// 组件卸载时清理资源
onBeforeUnmount(() => {
  // 断开Socket.IO连接
  disconnectSocket();
});
</script>

<template>
  <Page>
    <div class="agent-container">
      <!-- 标题区域 -->
      <div class="agent-header">
        <h1 class="agent-title">智能体演示页面</h1>
      </div>

      <!-- 内容区域 -->
      <div class="agent-content">
        <!-- 左侧表格区域 -->
        <Card class="score-table-card" :bordered="false">
          <template #title>
            <div class="card-title-wrapper">
              <span>学生成绩表</span>
              <Tooltip title="刷新数据">
                <Button
                  type="text"
                  class="refresh-button"
                  :loading="tableLoading"
                  @click="refreshTableData"
                >
                  <template #icon>
                    <Icon icon="material-symbols:refresh" />
                  </template>
                </Button>
              </Tooltip>
            </div>
          </template>
          <Table
            :columns="columns"
            :data-source="tableData"
            :loading="tableLoading"
            :pagination="pagination"
            row-key="id"
            @change="handleTableChange"
            bordered
            size="middle"
          >
            <template #emptyText>
              <Empty description="暂无数据" />
            </template>
          </Table>
        </Card>

        <!-- 右侧对话区域 -->
        <Card title="AI助手" class="chat-card" :bordered="false">
          <!-- 消息列表 -->
          <div class="messages-container" ref="messagesContainerRef">
            <Empty
              v-if="messages.length === 0"
              description="开始对话吧"
              class="empty-messages"
            />

            <div v-else class="messages-list">
              <div
                v-for="message in messages"
                :key="message.id"
                class="message-item"
                :class="[
                  isUserMessage(message) ? 'user-message' : 'ai-message',
                ]"
              >
                <!-- 消息头像 -->
                <div class="message-avatar">
                  <Avatar
                    v-if="isUserMessage(message)"
                    :src="message.avatar"
                    :alt="message.nickname || ''"
                  >
                    {{ message.nickname ? message.nickname[0] : 'U' }}
                  </Avatar>
                  <Avatar v-else class="ai-avatar">
                    <template #icon>
                      <Icon icon="logos:openai-icon" />
                    </template>
                  </Avatar>
                </div>

                <!-- 消息内容 -->
                <div class="message-content">
                  <div class="message-header">
                    <span class="message-nickname">
                      {{ getMessageNickname(message) }}
                    </span>
                  </div>
                  <div class="message-text">
                    <Loading v-if="message.typing" />
                    <div
                      v-else
                      class="markdown-content"
                      v-html="message.content"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 输入区域 -->
          <div class="chat-input-container">
            <div class="input-wrapper">
              <!-- 消息输入框 -->
              <Input.TextArea
                v-model:value="messageInput"
                placeholder="输入你的问题..."
                class="message-input"
                :auto-size="{ minRows: 1, maxRows: 4 }"
                @keydown="handleKeyDown"
              />

              <!-- 发送按钮 -->
              <Tooltip title="发送">
                <Button
                  type="primary"
                  class="send-button"
                  :loading="loading"
                  @click="handleSendMessage"
                >
                  <template #icon>
                    <Icon icon="material-symbols:send" />
                  </template>
                </Button>
              </Tooltip>

              <!-- 清空按钮 -->
              <Tooltip title="清空对话">
                <Button class="clear-button" @click="clearMessages">
                  <template #icon>
                    <Icon icon="material-symbols:delete-outline" />
                  </template>
                </Button>
              </Tooltip>
            </div>
          </div>
        </Card>
      </div>
    </div>
  </Page>
</template>

<style lang="less" scoped>
@import '../styles/common.less';
@import '../styles/theme.less';

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.agent-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;

  .agent-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;

    .agent-title {
      margin: 0;
      font-size: 22px;
      font-weight: 600;
      text-align: center;
    }
  }

  .agent-content {
    display: flex;
    flex: 1;
    gap: 16px;
    width: 100%;
    height: calc(100vh - 120px);
    overflow: hidden;

    @media (max-width: 1200px) {
      flex-direction: column;
      height: auto;
    }

    .score-table-card,
    .chat-card {
      display: flex;
      flex: 1;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 1px 4px rgb(0 0 0 / 10%);
      transition: box-shadow 0.3s ease;

      &:hover {
        box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
      }

      :deep(.ant-card-body) {
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: 0;
        overflow: hidden;
      }

      :deep(.ant-card-head) {
        min-height: 48px;
        padding: 0 16px;

        .ant-card-head-title {
          padding: 12px 0;
          font-size: 16px;
        }
      }
    }

    .score-table-card {
      @keyframes rotating {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      }

      min-width: 48%;

      .card-title-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        .refresh-button {
          margin-left: 8px;
          color: var(--primary-color, #1890ff);
          transition: all 0.3s;

          &:hover {
            color: var(--primary-hover-color, #40a9ff);
            background-color: rgb(24 144 255 / 10%);
            transform: rotate(30deg);
          }

          &:active {
            color: var(--primary-active-color, #096dd9);
          }

          &.ant-btn-loading {
            animation: rotating 1.2s linear infinite;
          }
        }
      }

      :deep(.ant-table-wrapper) {
        height: 100%;

        .ant-spin-nested-loading,
        .ant-spin-container,
        .ant-table {
          height: 100%;
        }

        .ant-table-container {
          height: calc(100% - 56px);
          overflow: auto;
        }

        .ant-table-thead > tr > th {
          font-weight: 600;
        }
      }
    }

    .chat-card {
      display: flex;
      flex-direction: column;
      min-width: 48%;
      max-height: 100%;
      overflow: hidden;

      .messages-container {
        flex: 1;
        min-height: 300px; /* 最小高度确保UI不会太拥挤 */
        max-height: calc(100vh - 260px);
        padding: 16px;
        overflow-y: auto;
        background-color: transparent;
        border-radius: 8px;

        .empty-messages {
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 100%;
        }

        .messages-list {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .message-item {
          display: flex;
          gap: 12px;
          max-width: 85%;
          animation: fade-in 0.3s ease-in-out;

          &.user-message {
            flex-direction: row-reverse;
            align-self: flex-end;

            .message-content {
              background-color: var(--chat-user-message-bg, #e6f7ff);
              border: 1px solid var(--chat-user-message-border, #bae7ff);
              border-radius: 12px 2px 12px 12px;
            }
          }

          &.ai-message {
            align-self: flex-start;

            .message-content {
              background-color: var(--chat-ai-message-bg, #f6f6f6);
              border: 1px solid var(--chat-ai-message-border, #e8e8e8);
              border-radius: 2px 12px 12px;
            }
          }
        }

        .message-avatar {
          flex-shrink: 0;

          :deep(.ant-avatar) {
            box-shadow: 0 2px 8px rgb(24 144 255 / 30%);
            transition: transform 0.2s ease;

            &:hover {
              transform: scale(1.1);
            }
          }

          .ai-avatar {
            background-color: #1890ff;
          }
        }

        .message-content {
          max-width: 90%;
          padding: 12px 16px;
          margin-top: 2px;

          .message-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
            color: var(--message-nickname-color, #595959);
          }

          .message-nickname {
            display: block;
            font-size: 14px;
            font-weight: 600;
          }

          .message-text {
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-color, #333);
            letter-spacing: 0.3px;
            word-break: break-word;

            :deep(.loading-container) {
              display: flex;
              align-items: center;
              margin: 8px 0;

              .loading-spinner {
                margin-right: 8px;
              }

              .loading-text {
                font-size: 14px;
                color: var(--text-color, #666);
              }
            }

            .markdown-content {
              /* Markdown 样式 */
              h1,
              h2,
              h3,
              h4,
              h5,
              h6 {
                margin-top: 0.5em;
                margin-bottom: 0.5em;
                font-weight: 600;
              }

              h1 {
                font-size: 1.5em;
              }

              h2 {
                font-size: 1.4em;
              }

              h3 {
                font-size: 1.3em;
              }

              h4 {
                font-size: 1.2em;
              }

              h5 {
                font-size: 1.1em;
              }

              h6 {
                font-size: 1em;
              }

              p {
                margin-bottom: 0.5em;
              }

              ul,
              ol {
                padding-left: 1.5em;
                margin-bottom: 0.5em;
              }

              li {
                margin-bottom: 0.2em;
              }

              pre {
                padding: 0.5em;
                margin-bottom: 0.5em;
                overflow-x: auto;
                background-color: #f6f8fa;
                border-radius: 3px;
              }

              code {
                padding: 0.2em 0.4em;
                font-family: monospace;
                font-size: 0.9em;
                background-color: #f6f8fa;
                border-radius: 3px;
              }

              pre code {
                padding: 0;
                background-color: transparent;
              }

              blockquote {
                padding-left: 1em;
                margin-left: 0;
                color: #666;
                border-left: 4px solid #ddd;
              }

              table {
                width: 100%;
                margin-bottom: 1em;
                border-collapse: collapse;
              }

              table,
              th,
              td {
                border: 1px solid #ddd;
              }

              th,
              td {
                padding: 8px;
                text-align: left;
              }

              img {
                max-width: 100%;
              }
            }
          }
        }
      }

      .chat-input-container {
        padding: 16px;
        margin-top: 8px;
        background-color: var(--input-container-bg, #fafafa);
        border-top: 1px solid var(--border-color, #f0f0f0);
        border-radius: 0 0 8px 8px;
        box-shadow: 0 -2px 6px rgb(0 0 0 / 5%);

        .input-wrapper {
          display: flex;
          gap: 12px;
          align-items: flex-end;

          .message-input {
            flex: 1;
            color: var(--input-text, #333);
            resize: none;
            background-color: var(--input-bg, #fff);
            border-color: var(--input-border, #d9d9d9);
            border-radius: 8px;
            transition: all 0.3s;

            &:hover,
            &:focus {
              border-color: #722ed1;
              box-shadow: 0 0 0 2px rgb(114 46 209 / 20%);
            }

            :deep(.ant-input) {
              padding: 10px 12px;
              border-radius: 8px;
            }
          }

          .send-button,
          .clear-button {
            flex-shrink: 0;
            height: 40px;
            color: #fff;
            border-radius: 8px;
            transition: all 0.3s;

            &:hover {
              box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
              transform: translateY(-2px);
            }

            &:active {
              transform: translateY(0);
            }
          }

          .send-button {
            background: linear-gradient(45deg, #1890ff, #722ed1);
            border: none;

            &:hover {
              background: linear-gradient(45deg, #40a9ff, #9254de);
            }
          }

          .clear-button {
            color: #666;
            background-color: #f5f5f5;
            border-color: #d9d9d9;

            &:hover {
              color: #ff4d4f;
              border-color: #ff4d4f;
            }
          }
        }
      }
    }
  }
}

/* 确保在暗色主题下也正常显示 */
:root[data-theme='dark'],
html[data-theme='dark'],
body[data-theme='dark'] {
  .agent-container {
    .score-table-card,
    .chat-card {
      background-color: var(--card-bg, #1f1f1f);
      box-shadow: 0 1px 4px rgb(0 0 0 / 20%);

      &:hover {
        box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
      }
    }

    .message-item {
      &.user-message .message-content {
        color: rgb(255 255 255 / 85%);
        background-color: var(--chat-user-message-bg, #153450);
        border-color: var(--chat-user-message-border, #177ddc);
      }

      &.ai-message .message-content {
        color: rgb(255 255 255 / 85%);
        background-color: var(--chat-ai-message-bg, #2a2a2a);
        border-color: var(--chat-ai-message-border, #434343);
      }

      .markdown-content {
        color: rgb(255 255 255 / 85%);

        pre,
        code {
          background-color: #2d2d2d;
        }

        blockquote {
          color: #bbb;
          border-left-color: #444;
        }

        table,
        th,
        td {
          border-color: #444;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          color: rgb(255 255 255 / 90%);
        }
      }
    }

    .chat-input-container {
      background-color: var(--input-container-bg, #141414);
      border-top: 1px solid var(--border-color, #303030);
      box-shadow: 0 -2px 6px rgb(0 0 0 / 15%);

      .message-input {
        color: var(--input-text, rgb(255 255 255 / 85%));
        background-color: var(--input-bg, #1f1f1f);
        border-color: var(--input-border, #434343);

        &:hover,
        &:focus {
          border-color: #722ed1;
        }
      }

      .clear-button {
        color: rgb(255 255 255 / 65%);
        background-color: #2a2a2a;
        border-color: #434343;
      }
    }

    .message-content {
      .message-header {
        color: var(--message-nickname-color, rgb(255 255 255 / 65%));
      }
    }

    .score-table-card {
      .card-title-wrapper {
        .refresh-button {
          color: var(--primary-color, #177ddc);

          &:hover {
            color: var(--primary-hover-color, #40a9ff);
            background-color: rgb(24 144 255 / 10%);
          }

          &:active {
            color: var(--primary-active-color, #0050b3);
          }
        }
      }
    }
  }
}
</style>
